<template>
  <div class="banner-box">
    <SiteInfo class="siteinfo" @drawInfo="handleDraw" />
    <Banner class="banner" :banners="banners" />
    <drawer-detail :openDrawer="openDrawer" :data="drawerData" @close="handleClose" />

  </div>
</template>

<script>
import SiteInfo from "./SiteInfo.vue";
import Banner from "./Banner.vue";
import DrawerDetail from "@/components/DrawerDetail.vue";
import huawei from '@/assets/image/huawei.jpg';
import apple from '@/assets/image/apple.jpg';

export default {
  components: { SiteInfo, Banner, DrawerDetail },
  data() {
    return {
      openDrawer: false,
      drawerData: null,
      banners: [
        {
          src: huawei,
          url: "",
        },
        {
          src: apple,
          url: "",
        },
        {
          src: "https://openfile.meizu.com/group1/M00/0A/A3/Cgbj0GQ9OVuAMRglAAMZ8Se33zc565.jpg",
          url: "",
        }, {
          src: "https://cdn.cnbj1.fds.api.mi-img.com/product-images/xiaomi-13kb7buy/5.png?x-fds-process=image/resize,q_90,f_webp",
          url: "",
        },
      ],
    };
  },
  methods: {
    handleClose() {
      this.openDrawer = false;
    },
    handleDraw(val) {
      this.drawerData = val;
      this.openDrawer = true;
    }
  }
};
</script>

<style lang='less' scpoed>
.banner-box {
  // display: flex;
  // justify-content: space-between;
  width: 100%;
}

.siteinfo {
  position: absolute;
  z-index: 100;
}

.siteinfo:hover {
  z-index: 1000;
}

.banner {
  z-index: 100;
  width: 85%;
  float: right;
  margin-top: 23px;
}
</style>